<template>
	<el-dialog title="新 增" :visible.sync="thisAddPage" :before-close="handleClose">
		<el-form ref="roleFrom" :model="roleFrom" label-width="135px" :rules="rules">
			<el-form-item label="角色名称" prop="roleName">
				<el-input v-model="roleFrom.roleName" placeholder="请输入角色名称" clearable></el-input>
			</el-form-item>
			
			<el-form-item label="角色编码" prop="roleCode">
				<el-input v-model="roleFrom.roleCode" placeholder="请输入角色编码" clearable></el-input>
			</el-form-item>
			
			<el-form-item label="角色描述" prop="description">
				<el-input v-model="roleFrom.description" placeholder="请输入角色描述" clearable></el-input>
			</el-form-item>
			
			<el-form-item label="是否有效" prop="valid">
				<el-radio-group v-model="roleFrom.valid">
					<el-radio border label="1">有效</el-radio>
					<el-radio border label="0">无效</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		
		<div slot="footer">
			<el-button type="primary" @click="onSubmit('roleFrom')">创 建</el-button>
			<el-button @click="resetForm('roleFrom')">重 置</el-button>
			<el-button @click="change">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { SaveRole, CheckName } from '@api/role/role'
	import dayjs from 'dayjs'
	export default {
		props: ["addPage"],
		data() {
			var validateConfirmRoleName = (rule, value, callback) => {
				this.loading = true
				CheckName({ roleName: value }).then(res => {
					if (res.data) {
						callback(new Error('RoleName已被使用!'));
					} else {
						callback();
					}
					this.loading = false
				}).catch(err => {
					console.log('err', err)
					this.loading = false
				})
			};
			return {
				thisAddPage: this.addPage,
				roleFrom: {
					roleName: '',
					roleCode: '',
					valid: 0,
					description: ''
				},
				parentIds: [],
				rules: {
					roleName: [
						{ required: true, message: '请输入角色名称', trigger: 'blur' },
						{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
						{ validator: validateConfirmRoleName, trigger: 'blur' }
					],
					valid: [{ required: true, message: '请选择是否有效', trigger: 'change' }],
				},
			}
		},
		watch: {
			addPage(val) {
				this.thisAddPage = val; //②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
				if(val) {
					this.getShops();
				}
			},
			thisAddPage(val) {
				//xxcanghai 小小沧海 博客园
				this.$emit("on-addPage-change", val); //③组件内对myResult变更后向外部发送事件通知
			}
		},
		methods: {
			change() {
				this.thisAddPage = !this.thisAddPage;
				//重置表单
				this.$refs['roleFrom'].resetFields();
			},
			/**双向绑定 end */

			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loading = true
						SaveRole(this.roleFrom).then(res => {
							this.$message({
								message: '创建成功',
								type: 'success'
							});
							this.$emit("on-loadlist-change"); //③组件内对myResult变更后向外部发送事件通知
							this.loading = false
							this.change()
						}).catch(() => {
							this.loading = false
						})

					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleClose(done) {
				this.$confirm('确定关闭吗').then(() => {
					// function(done)，done 用于关闭 Dialog
					done();
				}).catch(() => {
					// console.log("点击确定时触发");
				});
			}
		},
	}
</script>